<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 遮罩弹窗 -->
			<graceShade background="rgba(0,0,0,0.8)" :show="show">
				<view>
					<image @tap="gopath()" style="width: 522rpx;height: 700rpx" :src="img_url"></image>
					<view @tap="closeShade()" class="grace-flex-center" style="margin-top: 50rpx;">
						<image src="../../static/guanbiyouhuijuan.png" style="width: 57rpx;height: 57rpx;"></image>
					</view>
				</view>
			</graceShade>


			<!-- 顶部背景图 -->
			<view>
				<image src="../../static2/dbbj.png" @tap="tanchuang" style="width: 750rpx;height: 500rpx;" mode=""></image>
			</view>
			<!-- 顶部背景图 -->
			<!-- 客服轮播热线提醒 -->
			<view class="grace-rows grace-flex-vcenter kefu">
				<!-- <view class="grace-rows grace-flex-vcenter" style="height:120rpx;" v-if="speakerMsgs.length >= 1">
					<image src="../../static/index_kefus.png" style="margin: 0 50rpx; width: 70rpx;height: 56rpx;"></image>
					<view class="grace-columns">
						<text style="font-size:28rpx;">{{speakerMsgs}}</text>
					</view>
					<view style="margin-left: 259rpx;" @tap="phone()">
						<image src="../../static/bohaos.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view> -->
				<view class="grace-body" v-if="speakerMsgs.length >= 1">
					<grace-speaker :phoneNumber="phoneNumber" height="120rpx" :vertical="true" iconColor="#E76B61" :interval="3000"
					 iconClass="grace-icons icon-speaker" :msgs="speakerMsgs"></grace-speaker>
				</view>
			</view>

			<!-- 还款、云刷跳转按钮 -->
			<view class="grace-columns grace-flex-center">
				<!-- 智能还款 -->
				<view style="margin-top: 51rpx;margin-right: 135rpx;" @tap="Goto('/pages/card_keeper/card_keeper')">
					<image src="../../static2/zhinenghk.png" mode="" style="width: 130rpx;height: 130rpx;"></image>
					<view class="hks">智能还款</view>
				</view>
				<!-- 极速云刷 -->
				<view style="margin-top: 51rpx;" @tap="Goto('/pages/cloud_brush/cloud_brush1')">
					<image src="../../static2/jisuyuns.png" mode="" style="width: 130rpx;height: 130rpx;"></image>
					<view class="hks">极速云刷</view>
				</view>
				<!-- 一键升级 -->
				<view style="margin-top: 51rpx;margin-left: 135rpx;" @tap="Goto('/pages/rise_vip/rise_vip')">
					<image src="../../static2/sheng.png" mode="" style="width: 130rpx;height: 130rpx;"></image>
					<view class="hks">一键升级</view>
				</view>
			</view>
			<!-- <view class="grace-flex-center" style="position: relative;top: 0rpx; width: 750rpx;height: 220rpx;background:#FFFFFF;">
				<view class="grace-columns" style="text-align: center; position: relative;top: 28rpx; margin: 0 auto;" v-for="(i,index) in option"
				 :key="index" @tap="tourl(i.urls,indexlei[index],i.name)">
					<image :src="i.imgs" style="width: 100rpx;height: 100rpx;margin: 0 auto;"></image>
					<text style="color: #1678FF;font-size:28rpx;position: relative;top: 12rpx;color: #1678FF;">{{ i.name }}</text>
				</view>
			</view> -->
			<!-- 轮播图 -->
			<view style="margin-top: 41rpx;margin-bottom: 16rpx;">
				<swiper class="swiper" interval="3000" duration="1500" autoplay="ture" circular="ture">
					<swiper-item v-for="(item , index) in swiperItems" :key="index">
						<image :src="item.img" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图 -->

			<!-- <image @tap="msg_show('功能开发中...')" src="../../static/index_dibu.png" style="width:750rpx ;height: 1673rpx;margin-top: 20rpx;"></image> -->

			<!-- 底部通知 -->
			<graceBottomDialog :show="show3" v-on:closeDialog="closeDialog3">
				<view slot="content">
					<view style="width:750rpx;height:1030rpx;background:rgba(255,234,169,1);border-radius:20rpx 20rpx 0px 0px;">
						<view style="position: relative;bottom: 5rpx; width:750rpx;height:470rpx;background:rgba(255,234,169,1);border-radius:20rpx 20rpx 0px 0px;">
							<view style="position: relative;top: 20rpx;">
								<image src="../../static/index_tejia.png" style="width: 422rpx;height: 50rpx;margin-left: 164rpx;"></image>
								<image @tap="closeDialog3()" src="../../static/quxiao_yuan.png" style="margin-left: 84rpx; width: 50rpx;height: 50rpx;"></image>
							</view>
							<view class="grace-space-between grace-wrap" style="padding:0 30rpx;">
								<image v-for="(item,index) in tejia" :key="index" @tap="is_vip===0?showDialog2(item.id,item.txt):Goto('/pages/buy_coupons/buy_coupons?id='+item.id)"
								 :src="item.tubiao" style="margin-top: 30rpx; width: 332rpx;height: 438rpx;"></image>
							</view>

						</view>
					</view>
				</view>
			</graceBottomDialog>

			<graceDialog :isTitle="false" :show="show2" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<!-- <text>请输入验证码</text> -->
					<text style="font-size: 26rpx;">{{ tanchuang_text }}</text></br>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closefirm2">继续</text>
					<text class="grace-dialog-buttons" style="color: rgba(204,41,14,1);" @tap="confirm2()">升级vip</text>
				</view>
			</graceDialog>

		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	import graceSpeaker from "../../graceUI/components/graceSpeaker.vue";
	import graceswipercard from "../../graceUI/components/graceSwiperCard.vue";
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	export default {
		data() {
			return {
				tanchuang_text: '',
				quan_id: 0,
				is_vip: 0,
				show3: false,
				show2: false,
				phoneNumber: '028-69918477',
				tejia: [],
				is_jump: 0, //签到是否跳转
				urls: "", //如果is_jump为0时,这为请求地址,is_jump为1时这为跳转地址
				show: false,
				img_url: '',
				action: '',
				tiaozhuan: 0,
				u_state: "", //认证状态
				option: [],
				swiperItems: [],
				swiperItemss: '',
				speakerMsgs: [],
				is_vips: false,
				indexlei: ['/pages/card_keeper/card_keeper?types=1,2', '/pages/cloud_brush/cloud_brush1',
					'/pages/Huabei_collection/Huabei_collection', '/pages/shouxin/shouxin_huaikuai?types=3,4'
				]
			};
		},
		onLoad() {},
		onShow() {
			var vm = this;
			vm.option = [];
			vm.swiperItems = [];
			vm.speakerMsgs = [];
			// this.req.post(
			// 	this.lochost + '/mytrunk/index/get_config', {}, {},
			// 	function(res) {
			// 		vm.is_shopping = res.data.platform.is_shopping;

			// 	});
			this.req.post(
				this.lochost + '/index/index?method=message_list', {}, {},
				function(res) {
					console.log(res);
					// vm.phoneNumber = res.data.title;
					for (let i = 0; i < res.data.length; i++) {
						vm.speakerMsgs.push({
							title: res.data[i].title,
							url: '/pages/generation_plan/details_of_the_plan?id=' + res.data[i].url,
							opentype: "navigate",
							// color: notice_list[i].zhuangtai === 0 ? 'rgba(204,41,14,1)' : 'rgba(8,214,8,1)',
						})
						console.log(vm.speakerMsgs)
					}
				});
			vm.req.post(
				vm.lochost + '/index/index?method=banner_list', {
					type: 1
				}, {},
				function(res1) {
					console.log(res1);
					// vm.phoneNumber = res1.data.kehu;
					// vm.option = res1.data.option;
					vm.swiperItems = res1.data
					console.log(vm.swiperItems[0].img);
					// var swiperItems_list = res1.data;
					// for (let i = 0; i < swiperItems_list.length; i++){

					// 	vm.swiperItems.push(swiperItems_list[i].img) 
					// 	console.log(vm.swiperItems);
					// }
					// vm.is_jump = res1.data.qiandao.is_jump;
					// vm.urls = res1.data.qiandao.urls;
					// vm.is_vips = res1.data.is_vip
					// vm.swiperItemss = res1.data.advertisement[0].imgs;
					// var notice_list = res1.data.notice;
					// var url = '';
					// for (let i = 0; i < notice_list.length; i++) {
					// 	vm.speakerMsgs.push({
					// 		title: notice_list[i].content,
					// 		url: '/pages/generation_plan/details_of_the_plan?id=' + notice_list[i].id,
					// 		opentype: "navigate",
					// 		color: notice_list[i].zhuangtai === 0 ? 'rgba(204,41,14,1)' : 'rgba(8,214,8,1)',
					// 	})
					// 	console.log(vm.speakerMsgs)
					// }
				});
			this.tanhcuang_img()
		},
		methods: {
			qiandao() {
				var vm = this;
				if (vm.is_jump === 0) {
					vm.req.post(
						vm.urls, {}, {},
						function(res) {
							vm.msg_show(res.msg);
						}
					)
				} else {
					vm.Goto('/pages/web_view/web_view?url=' + vm.urls + '?token=' + uni.getStorageSync('user_token'));
				}
			},
			tanhcuang_img() {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/index/getvipandtequan2', {}, {},
					function(res) {
						vm.tejia = res.data.data;
						vm.is_vip = res.data.is_vip;
					}
				)
			},
			showDialog3: function() {
				this.show3 = true;
				uni.hideTabBar();
			},
			closeDialog3: function() {
				this.show3 = false;
				uni.showTabBar();
			},
			showDialog2: function(id, text) {
				this.tanchuang_text = text;
				this.quan_id = id;
				this.show2 = true;
			},
			closeDialog2: function() {
				this.show2 = false;
			},
			confirm2() {
				this.closeDialog2();
				this.Goto('/pages/rise_vip/rise_vip');
			},
			closefirm2() {
				this.closeDialog2();
				this.Goto('/pages/buy_coupons/buy_coupons?id=' + this.quan_id);
			},

			tanchuang(e) {
				console.log(e);
				// if(e.t_type==="1"){
				// 	this.tiaozhuan=1;
				// 	this.img_url=e.t_img;
				// 	this.action=e.action;
				// 	this.showShade();
				// }else if(e.t_type==="2"){
				// 	this.showDialog3();
				// }
				if (e.id == 1) {
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/rise_vip/rise_vip'
					})

				}
			},
			// is_show(){
			// 	var vm=this;
			// 	vm.req.post(
			// 	vm.lochost+'/mytrunk/index/get_user_hb',
			// 	{},
			// 	{},
			// 	function(res){
			// 		var data=res.data;
			// 		vm.img_url=data.img_url;
			// 		vm.tiaozhuan=data.tiaozhuan;
			// 		vm.action=data.action;
			// 		if(data.tanchu===1){
			// 			vm.showShade();
			// 		}
			// 	}
			// 	)
			// },
			gopath() {
				var vm = this;
				if (vm.tiaozhuan === 1) {
					vm.Goto(vm.action);
				} else {
					vm.req.post(
						vm.action, {}, {},
						function(res) {
							vm.closeShade();
							vm.msg_show(res.msg);
						}
					)
				}
			},

			showShade: function() {
				uni.hideTabBar();
			},
			closeShade: function() {
				this.show = false;
				uni.showTabBar();
			},



			phone() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber //仅为示例
				});
			},
			tourl(url, path, name) {
				// return
				if (!path) {
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					})
					return
				}
				if (name == '授信') {
					if (!this.is_vips) {
						uni.showToast({
							title: '本功能只能会员使用',
							icon: "none"
						})
						setTimeout(function() {
							var url = '/pages/rise_vip/rise_vip';
							uni.navigateTo({
								url: url
							})
						}, 1000)
						return;
					}
				}
				if (name === '余额' || name === '云刷' || name === '花呗') {
					if (this.u_state === '未认证') {
						uni.navigateTo({
							url: '/pages/authentication/non_real_name'
						})
						return
					}
				}

				var vm = this;
				if (url === '') {
					if (path === '/pages/card_keeper/card_keeper' || path === '/pages/cloud_brush/cloud_brush1' || path ===
						'/pages/card_bag/card_bag') {
						vm.req.post(
							vm.lochost + '/mytrunk/index/get_user_hb', {}, {},
							function(res) {
								var data = res.data;
								vm.img_url = data.img_url;
								vm.tiaozhuan = data.tiaozhuan;
								vm.action = data.action;
								// if(data.tanchu===1){
								// 	vm.showShade();
								// }else{
								// 	vm.Goto(path);
								// }
								vm.Goto(path)
							}
						)
					} else {
						vm.Goto(path);
					}

				} else {
					this.Goto('/pages/web_view/web_view?url=' + url)
				}
			}
		},
		components: {
			gracePage,
			graceswipercard,
			graceSpeaker,
			graceShade,
			graceBottomDialog,
			graceDialog
		}
	}
</script>

<style>
	page{
		height: 100%;
		width: 100%;
		overflow: hidden;
		margin-bottom: 16rpx;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 750rpx;
	}

	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.kefu {
		position: relative;
		/* float: right; */
		width: 660rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: -35rpx;
		margin-bottom: 13rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-left: 45rpx;
		/* z-index: 9999; */
	}

	.hks {
		margin-left: 12rpx;
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
	}

	.swiper {
		height: 400rpx;
	}

	swiper-item image {
		width: 100%;
		height: 400rpx;
	}
</style>
